<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Pseudo-Class: Hover - Cascading Style Sheet Syntax</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">Pseudo-class:<br>hover</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">IE4</i></b>|<b class="s">N6</b>|<b class="s">O4</b>|<b class="s">S1</b>]<br></td>
    <td align=center><b class="alert">Other State-Dependent<br>Pseudo-Classes</b><br></td>
</tr>
<tr>
    <td align=center><a href="pclasslink.htm">link</a><br>
    <a href="pclassvisited.htm">visited</a><br>
    <a href="pclassactive.htm">active</a><br>
    <a href="pclassfocus.htm">focus</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<font size=2><a href="../../index.html">Main Index</a> |
<a href="../../propindex/font.htm">Property Index</a> |
<a href="../../supportkey/syntax.htm">CSS Support History</a> |
<a href="../../../history/browsers.htm">Browser History</a></font>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
    <th colspan=2 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>Not defined</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>&lt;<b class="tagname">tag</b>
        <span class="tagattrib">MOUSEOVER</span>=&quot;function()&quot;&gt;</td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>The Hover Pseudo-class is activated when the system pointing device
        (if any exists) is within the bounds of the current element rendering
        box, but has not been activated (via mouse click, etc.) The Hover
        Pseudo-class is one of several that are activated based on events that occur
        over time or as initiated by the user.
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">a.test:hover</b>
        { <span class="property">color:</span> red }</div>
    <dd><div class="example">In-Line:&#160; NA</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>Careful attention must be paid to cascading order when using Pseudo-classes.
        For example, the Hover pseudo-class style rule must occur after any Link and
        Visited pseudo-class rules in order to prevent the pseudo-classes from blocking
        visibility of each other.
    <li>CSS2 notes that browsers do not need to support this pseudo-class, and with
        some browsers or systems implementing this system may be impractical or impossible.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
            <dd><b class="alert2">4.0+:</b>
            <dd>- This Pseudo-class currently only applies to hyperlinks.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
            <dd><b class="alert2">6.x:</b>
            <dd>- This behaves as you would expect it to with hyperlinks.
            <dd>- This pseudo-class also applies to form elements such as the INPUT
                types, SELECT and TEXTAREA.
            <dd>- Although this can be applied to TEXTAREA and INPUT TYPE=
                PASSWORD/TEXT fields, it behaves oddly. The "hover" state only
                exists when the mouse is right on the rendered boundary of the
                element. When the pointer is inside the magic region, the hover
                state is considered "off."
            <dd>- Although it CAN be said that this pseudo-class applies to
                block-level elements, it produces odd behaviors: the "hover" state
                only exists when the pointer is in the non-text portions of the element
                (such as blank regions off to the right of the content.) For
                TABLE, the "hot" region is just at the edge boundary of the
                table box, and cell "hot" regions are also in the non-text portions
                of the element.
            <dd>- It does not apply to inline elements (eg: SPAN, B, IMG)
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
            <dd><b class="alert2">4.0+:</b>
            <dd>- This Pseudo-class currently only applies to hyperlinks.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>